<template>
	<d2-container>
		<!-- 搜索 -->
		<template slot="header">
			<el-form ref="queryForm" :model="queryForm" class="header-area" label-width="80px" style="height:auto">
				<el-row>
					<el-col :span="5">
						<el-form-item label="排名类型" prop="rankingType">
							<el-select v-model="queryForm.rankingType" placeholder="请选择" style="width: 100%;">
								<el-option label="不限" value=""></el-option>
								<el-option label="总排名" value="history"></el-option>
								<el-option label="按月排名" value="month"></el-option>
								<el-option label="按周排名" value="week"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="5">
						<el-form-item label="所属社区" prop="departmentId">
							<el-select v-model="queryForm.departmentId" filterable placeholder="请选择或输入名称" style="width: 100%;">
								<el-option label="不限" value=""></el-option>
								<el-option :label="item.departmentName" :value="item.id" v-for="item of communityList" :key="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="3">
						<div class="search-submit">
							<el-button type="primary" @click="submitForm('queryForm')">查询</el-button>
							<el-button @click="resetForm('queryForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>
		
		<!-- 列表部分 -->
		<template>
			<el-table :data="tableData" stripe border style="width: 100%">
				<el-table-column type="index" fixed label="序号" width="50" align="center"></el-table-column>
				
				<el-table-column prop="departmentName" label="社区名称" align="center"></el-table-column>
				<el-table-column prop="rankingType" label="排名类型" align="center" width="160">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.rankingType == 'history'">总排名</el-tag>
						<el-tag type="success" v-if="scope.row.rankingType == 'month'">月排名</el-tag>
						<el-tag type="warning" v-if="scope.row.rankingType == 'week'">周排名</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="rankingType" label="排名时间段" align="center" width="220">
					<template slot-scope="scope">
						{{formatterDate(scope.row.rankingStartDate)}}至{{formatterDate(scope.row.rankingEndDate)}}
					</template>
				</el-table-column>
				
				<el-table-column prop="creditsTotal" label="总积分=实际积分+虚拟积分" align="center" width="220"></el-table-column>
				<el-table-column prop="creditsReal" label="实际积分" align="center" width="180"></el-table-column>
				<el-table-column prop="creditsFake" label="虚拟积分" align="center" width="180"></el-table-column>
				
				<el-table-column label="创建时间" :formatter="forDate" prop="createTime" width="180" align="center"></el-table-column>
				
				<el-table-column label="操作" fixed="right" width="170">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="viewDetail(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		
		<!-- 翻页 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>
		
		<template>
			<community-ranking-detail-dialog
				:isShow="showDetailDialog"
				:item="currentItem"
				@close="closeDetailDialog"
			></community-ranking-detail-dialog>
		</template>
	</d2-container>
</template>

<script>
	import dayjs from 'dayjs'
	import { getCommunityRanking, getCommunityList } from '@api/platform/platformMarketing'
	import communityRankingDetailDialog from './components/community-ranking-detail-dialog'
	export default {
		components: {
			communityRankingDetailDialog
		},
		data() {
			return {
				queryForm: {
					departmentId: '',
					belongDay: '',
					rankingType: '',
				},
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				
				communityList: [],
				
				showDetailDialog: false,
				currentItem: {}
			}
		},
		methods: {
			getData() {
				getCommunityRanking({
					departmentId: this.queryForm.departmentId,
					rankingType: this.queryForm.rankingType,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
					.then(res => {
						this.tableData = res.data.content;
						this.total = res.data.total;
					})
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getData();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getData();
			},
			resetPage() {
				this.currentPage = 1;
				this.pageSize = 10;
				this.total = 0;
			},
			
			forDate(row, column) { //时间格式化
				if(column.property == 'createTime') {
					return row.createTime == null ? '-' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss');
				}
			},
			formatterDate(val) {
				return dayjs(val).format('YYYY-MM-DD');
			},
			
			submitForm(formName) {
				this.resetPage();
				this.getData();
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.time = [];
				this.resetPage();
				this.getData();
			},
			
			getCommunityList() {
				getCommunityList({
					currentPage: 1,
					pageSize: 999
				})
					.then(res => {
						this.communityList = res.data.content;
					})
			},
			
			viewDetail(item) {
				this.currentItem = item;
				this.showDetailDialog = true;
			},
			closeDetailDialog() {
				this.showDetailDialog = false;
			},
		},
		mounted() {
			this.getData();
			this.getCommunityList();
		}
	}
</script>

<style>
</style>